<template>
  <baidu-map :center="center" :zoom="zoom" :scroll-wheel-zoom="true" @ready="handler" @click="clickHandler">
  	<bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
  	<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
  	<bm-scale anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-scale>
  	<!--<bm-overview-map anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :isOpen="true"></bm-overview-map>-->
  	<bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
  	<bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
  	<bm-marker :position="center" :dragging="true" animation="BMAP_ANIMATION_BOUNCE" @click="infoWindowOpen">
  		<bm-info-window :show="show" @close="infoWindowClose" @open="infoWindowOpen">我爱北京天安门,天安门上太阳升！</bm-info-window>
  	</bm-marker>
  </baidu-map>
</template>
<script>
export default {
  data () {
    return {
      center: {lng: 0, lat: 0},
      zoom: 3,
      show:false
    }
  },
  methods: {
    handler ({BMap, map}) {
      console.log(BMap, map)
      this.center.lng = 116.404
      this.center.lat = 39.915
      this.zoom = 15
    },
    infoWindowClose () {
      this.show = false
    },
    infoWindowOpen () {
      this.show = true
    },
    clickHandler (e) {
      console.log(e.point.lng+"***"+e.point.lat)
    }
  }
}
</script>